<template>
	<view class="tabInfo" :style="{height: leaveInfoHeight+'px'}">
		<view class="tabInfo_t">
			<view class="t_left">
					<view class="">
						<image class="image_Info" :src="LeaveLogInfo.applyUserImage" mode=""></image>
					</view>
					<view class="info-name">
						<view class="">
							{{LeaveLogInfo.applyUserName}}
						</view>
						<view class="info-type">
							{{LeaveLogInfo.shopName}} {{LeaveLogInfo.classifyName}} {{LeaveLogInfo.className}}
						</view>
					</view>
			</view>
			<image class="image1_Info" src="../../static/images/dh2@2x.png" mode="" @tap="callPhone(LeaveLogInfo.phone)"></image>
			
		</view>
		<view class="tabInfo_c">
			<view class="c-row1">
				<view class="c-row1-t">
					<view class="">
						请假类型：
					</view>
					<view class="" v-if='LeaveLogInfo.type===1'>
						病假
					</view>
					<view class="" v-if='LeaveLogInfo.type===2'>
						事假
					</view>
					<view class="" v-if='LeaveLogInfo.type===3'>
						婚假
					</view>
					<view class="" v-if='LeaveLogInfo.type===4'>
						丧假
					</view>
					<view class="" v-if='LeaveLogInfo.type===5'>
						其他
					</view>
				</view>
				<view class="">
					{{LeaveLogInfo.createTime}}
				</view>
			</view>
			<view class="c-row2">
				<view class="">
					开始时间：
				</view>
				<view class="">
					{{LeaveLogInfo.startTime}}
				</view>
			</view>
			<view class="c-row2">
				<view class="">
					结束时间：
				</view>
				<view class="">
					{{LeaveLogInfo.endTime}}
				</view>
			</view>
			<view class="c-row">
				<view class="">
					请假原因：
				</view>
				<view class="">
					{{LeaveLogInfo.reason}}
				</view>
			</view>
		</view>
		<view class="tabInfo_b">
			<view class="refundBtn" @tap="refundBtn">
				拒绝
			</view>
			<view class="passBtn" @tap="passBtn">
				审批通过
			</view>
		</view>
		<!-- 拒绝弹框 -->
		<wybPopup ref="popup" type="center">
				    <view class="pop_t">
						<view class="refundtitle">
							拒绝原因
						</view>
						<textarea class="refundcase" v-model="refundcase" value="" placeholder="请输入拒绝原因" auto-height :is-show-nav="false"/>
						<view class="bottom">
							<view class="cancel" @tap="cancel">
								取消
							</view>
							<view class="sure"  @tap="sure">
								确定
							</view>
						</view>
					</view>
		</wybPopup>
	</view>
</template>

<script> 
	import wybPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				leaveInfoHeight:550,
				LeaveLogInfo:'',
				id:'',
				refundcase:''
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.leaveInfoHeight = res.windowHeight 
					//windoHeight为窗口高度，主要使用的是这个
	
				}
			})
		},
		onLoad(option){
			this.getLeaveLogInfo(option.id)
			this.id = option.id
		},
		methods: {
			callPhone(phone){
				// console.log(phone)
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			getLeaveLogInfo(id){
				this.$api.getLeaveLogInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.LeaveLogInfo = res.data.dataMap
					}
				})
			},
			//拒绝
			refundBtn(){	
				console.log(1)
				this.$refs.popup.open('top')
			},
			sure(){
				if(this.refundcase===''){
					uni.showToast({
						title: '请填写拒绝原因',
						duration: 1500,
						icon: "none",
						
					});
				}else{
					this.$api.passOrRefuseLeave({
					id:this.id,
					status: 1,
					replay:this.refundcase
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data)
						uni.navigateBack(1)
						uni.$emit("backdata",2);
						// this.LeaveLogInfo = res.data.dataMap
					}
				})
				}
				
			},
			//审批通过
			passBtn(){
				this.$api.passOrRefuseLeave({
					id:this.id,
					status: 2
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '审核通过！',
							duration: 1500,
							icon: "none",
							
						});
						uni.navigateBack(1)
						uni.$emit("backdata",1);
						console.log(res.data.dataMap)
						// this.LeaveLogInfo = res.data.dataMap
					}
				})
			},
			cancel(){
				this.$refs.popup.close('top')
			}
		}
	}
</script>

<style scoped>
	.bottom{
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}
	.cancel{
		width: 280rpx;
		height: 108rpx;
		text-align: center;
		line-height: 108rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		border:2rpx solid #EEEEEE; 
		border-radius: 20rpx;
		border-radius:0 0 0rpx 20rpx;
	}
	.sure{
		width: 280rpx;
		height: 108rpx;
		text-align: center;
		line-height: 108rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FF7E51;
		border:2rpx solid #EEEEEE; 
		border-radius:0 0 20rpx 0rpx;
	}
	.refundtitle{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.refundcase{
		margin: 0 auto;
		width: 480rpx;
		/* height: 240rpx; */
		background: #F2F2F2;
		border-radius: 12px;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		min-height: 160rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 25rpx 20rpx;

	}
	.pop_t{
		width: 560rpx;
		height: 450rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.tabInfo_b{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
	}
	.passBtn{
		width: 330rpx;
		height: 88rpx;
		background: #FF5551;
		border: 2rpx solid #FF5551;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	.refundBtn{
		width: 330rpx;
		height: 88rpx;
		background: #FFFFFF;
		border: 2rpx solid #FF5551;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FF5551;
		text-align: center;
		line-height: 88rpx;
	}
	.c-row1-t{
		display: flex;
	}
	.c-row1-t>view:nth-child(1){
		color: #666666;
		width: 140rpx;
	}
	.c-row{
		display: flex;
		margin-top: 10rpx;
	}
	.c-row2{
		display: flex;
	}
	.c-row1{
		display: flex;
		justify-content: space-between;
	}
	.c-row>view:nth-child(1){
		color: #666666;
		width: 154rpx;
		line-height: 36rpx;
	}
	.c-row>view:nth-child(2){
		width: 600rpx;
		line-height: 36rpx;
	}
	.c-row2>view:nth-child(1){
		color: #666666;
		width: 140rpx;
	}
	.c-row1>view:nth-child(2){
		color: #666666;
		font-size: 24rpx
	}
	.image1_Info{
		width: 60rpx;
		height: 60rpx;
	}
	.image_Info{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}
	.tabInfo{
		background-color: #F8F8F8;
	}
	.tabInfo_t{
		width: 690rpx;
		height: 102rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 34rpx 30rpx;
		justify-content: space-between;
	}
	.t_left{
		display: flex;
		align-items: center;
	}
	.t_left>view:nth-child(1){
		margin-top: 15rpx;
	}
	.t_left>view:nth-child(2){
		margin-left: 20rpx;
	}
	.info-name{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.info-type{
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
	.tabInfo_c{
		width: 690rpx;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
</style>
